<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>麦味·酒店预订首页</title>
    <meta name="description" content="">
    <meta name="keywords" content="">


    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet">

    <link rel="stylesheet" href="/assets/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/assets/css/animate.css">
    <link rel="stylesheet" href="/assets/fonts/ionicons/css/ionicons.min.css">

    <link rel="stylesheet" href="/assets/css/owl.carousel.min.css">

    <link rel="stylesheet" href="/assets/fonts/flaticon/font/flaticon.css">

    <link rel="stylesheet" href="/assets/fonts/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="/assets/css/select2.css">


    <link rel="stylesheet" href="/assets/css/helpers.css">
    <link rel="stylesheet" href="/assets/css/style.css">

</head>
<body>


<nav class="navbar navbar-expand-lg navbar-dark probootstrap_navbar" id="probootstrap-navbar">
    <div class="container">
        <a class="navbar-brand" href="/admin">My Way</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#probootstrap-menu"
                aria-controls="probootstrap-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span><i class="ion-navicon"></i></span>
        </button>
        <div class="collapse navbar-collapse" id="probootstrap-menu">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active"><a class="nav-link" href="/index">首页</a></li>
                <li class="nav-item"><a class="nav-link" id="order" onclick="alert('还未登录！')" href="/enter">我的订单</a></li>
                <li class="nav-item"><a class="nav-link" href="/enter" id="denglu">登录</a></li>
                <li class="nav-item"><a class="nav-link" href="/register" id="zhuce">注册</a></li>
                <script>
                    var name = "uName";//Cookies名字
                    this.GetCookie = function (name) {
                        var ck = document.cookie;
                        var exp1 = new RegExp(name + "=.*?(?=;|$)");
                        var mch = ck.match(exp1);
                        return mch ? unescape(mch[0].substring(name.length + 1)) : null;
                    }
                    if (GetCookie(name) != null) {
                        document.getElementById("denglu").innerText = "您好，" + GetCookie(name);
                        document.getElementById("denglu").removeAttribute("href");
                        document.getElementById("order").href = "/userorder";
                        document.getElementById("order").onclick = "";
                        document.getElementById("zhuce").innerText = "退出登录";
                        document.getElementById("zhuce").href = "/enter/logout";
                    }
                </script>
            </ul>
        </div>
    </div>
</nav>
<!-- END nav -->

<section class="probootstrap-cover overflow-hidden relative" style="background-image: url('/assets/images/bg_1.jpg');"
         data-stellar-background-ratio="0.5" id="section-home">
    <div class="overlay"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md">
                <h2 class="heading mb-2 display-4 font-light probootstrap-animate text-center">订酒店，上麦味!</h2>
                </br></br></br></br></br>
            </div>
            <div class="col-md probootstrap-animate">
                <form action="/search" class="probootstrap-form" method='post' id="form" th:object="${search}">
                    <div class="form-group">
                        <div class="row mb-3">
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="city">城市</label>
                                    <label for="city" style="width: 100%;">
                                        <select required="true" class="js-example-basic-single js-states form-control"
                                                id="city" style="width: 100%;" name="city" th:field="*{city}">
                                        </select>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="keyword">酒店关键字</label>
                                    <label for="keyword" style="width: 100%;">
                                        <input type="text" class="form-control" id="keyword" name="name"
                                               placeholder="如锦江、如家" th:field="*{name}">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <!-- END row -->

                        <div class="row mb-5">
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="probootstrap-date-arrival">入住日期</label>
                                    <div class="probootstrap-date-wrap">
                                        <span class="icon ion-calendar"></span>
                                        <input readonly="readonly" required="true" autocomplete="off" type="text"
                                               id="probootstrap-date-arrival"
                                               class="form-control" placeholder="" name="start" th:field="*{start}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="probootstrap-date-departure">离店日期</label>
                                    <div class="probootstrap-date-wrap">
                                        <span class="icon ion-calendar"></span>
                                        <input readonly="readonly" required="true" autocomplete="off" type="text"
                                               id="probootstrap-date-departure"
                                               class="form-control" placeholder="" name="end" th:field="*{end}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- END row -->

                        <input type="text" id="lng" style="display: none" name="longitude" th:field="*{longitude}">
                        <input type="text" id="lat" style="display: none" name="latitude" th:field="*{latitude}">

                        <div class="row">
                            <div class="col-md">
                                <input type="submit" value="搜索" id="hsubmit"
                                       class="btn btn-primary btn-block">
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    </br></br></br></br></br></br></br>
    <div class="col-md-12 text-center">
        <p style="color:white;" class="probootstrap_font-14">Copyright © 2019 . My Way 麦味 · 酒店订购</p>
    </div>

</section>
<!-- END section -->

<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/owl.carousel.min.js"></script>

<script src="/assets/js/bootstrap-datepicker.js">
</script>
<script src="/assets/js/jquery.waypoints.min.js"></script>
<script src="/assets/js/jquery.easing.1.3.js"></script>

<script src="/assets/js/select2.min.js"></script>

<script src="/assets/js/main.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7LZ9FcsaUv2q5CbfrPp4uQR8pEgMnGf0"></script>

<script src="/assets/js/area.js"></script><!--所有城市数据-->
<script src="/assets/js/select.js"></script><!--默认调用方法-->
<script src="/assets/verSelector/verSelect.js"></script><!--封装插件-->
<script>
    new verSelector(); //启动插件
</script>

<script>

    var date1 = new Date();
    var date2 = new Date(date1);
    date2.setDate(date1.getDate() + 1);

    $('#probootstrap-date-arrival').datepicker(
        'setDate', date1
    );
    $('#probootstrap-date-departure').datepicker(
        'setDate', date2
    );


    $('#hsubmit').click(function () {
        if (localStorage.getItem("city")) {
            localStorage.removeItem("city");
        }
        if (localStorage.getItem("keyword")) {
            localStorage.removeItem("keyword");
        }
        if (localStorage.getItem("arr")) {
            localStorage.removeItem("arr");
        }
        if (localStorage.getItem("dep")){
            localStorage.removeItem("dep");
        }
        localStorage.setItem("city", $('#city').val());
        localStorage.setItem("keyword", $('#keyword').val());
        localStorage.setItem("arr", $('#probootstrap-date-arrival').val());
        localStorage.setItem("dep", $('#probootstrap-date-departure').val());
    })

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            var longitude = r.point.lng;
            var latitude = r.point.lat;
            $('#lng').val(longitude);
            $('#lat').val(latitude);
        }
        else {
            alert("无法获取当前位置!");
            distance.disabled = true;
        }
    }, {enableHighAccuracy: true})

    /*    $('from').submit(function(){
            addCookie('city', $('city').val());
            addCookie('keyword', $('keyword').val());
            addCookie('arrdate', $('probootstrap-date-arrival').val());
            addCookie('depdate', $('probootstrap-date-departure').val());
        })
        //设置Cookie
        function addCookie(name,value,expireHours){
            var cookieString=name+"="+escape(value);
            //判断是否设置过期时间
            if(expireHours>0){
                var date=new Date();
                date.setTime(date.getTime+expireHours*3600*1000);
                cookieString=cookieString+"; expire="+date.toGMTString();
            }
            document.cookie=cookieString;
        }*/

</script>
<script>
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    /*    function mySub2() {
            var arr = document.getElementById("probootstrap-date-arrival").value;
            var dep = document.getElementById("probootstrap-date-departure").value;
            if (arr == "") {
                arr = getNowFormatDate();
                document.getElementById("probootstrap-date-arrival").value = arr;
            }
            if (dep == "") {
                dep = getNowFormatDate();
                document.getElementById("probootstrap-date-departure").value = dep;
            }
            var b = (new Date(dep) - new Date(arr)) / (60 * 60 * 24 * 1000);
            document.cookie="arr="+arr;path=/";
            document.cookie="dep="+dep;path=/";
            document.cookie="b="+b;path=/";
            var form = document.getElementById("myForm");
            form.submit();
        }*/
</script>
</body>
</html>